<template>
  <basic-container>
    <el-container>
      <el-aside width="200px">
        <deptTree ref="building_tree"
                  @treeNode-click="treeNodeClick"></deptTree>
      </el-aside>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">企业总览</h4>
          <div class="row row padding-top20">
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">本月资金动态（截至昨天）</div>
                <div class="dd-person-status ng-binding">现金资产余额
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('现金资产余额',0)"
                             v-text="form.cash">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本月资金收入
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本年度支出与收入',0)"
                             v-text="form.income_mon">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本月资金支出
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="capitalList('本年度支出与收入',0)"
                             v-text="form.pay_mon">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本日资金收入
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="capitalList('本日资金收入',1)"
                             v-text="form.income_day">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">本日资金支出
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="capitalList('本日资金支出',1)"
                             v-text="form.pay_day">
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工流动情况情况</div>
                <br>
                <div class="dd-person-status ng-binding">在职人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('在职人数',18)"
                             v-text="form.employee">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">离职人数
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('离职人数',3)"
                             v-text="form.employee_lz">
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class="col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">员工社会保险情况</div>

                <br>
                <div class="dd-person-status ng-binding">已投保人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('已投保人数',59)"
                             v-text="form.insurance">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">未投保人数
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('未投保人数',2)"
                             v-text="form.insurance_no">
                  </el-button>
                </div>
                <!-- ngIf: dataCenter.unactiveCount > 0 -->
              </div>
            </div>
            <div class=" col_4">
              <div class="dd-dataCenter-panel">
                <div class="dd-dataCenter-panel-hd ng-binding">手机银行开户情况</div>
                <br>
                <div class="dd-person-status ng-binding">开户人数
                  <el-button type='text'
                             class="pull-right text-success ng-binding"
                             @click="employeeList('逾期人数',1)"
                             v-text="form.card">
                  </el-button>
                </div>
                <div class="dd-person-status ng-binding">未开户人数(3个月内)
                  <el-button type='text'
                             class="pull-right text-danger ng-binding"
                             @click="employeeList('逾期预警',5)"
                             v-text="form.card_no">
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding"
              data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">企业数据分析
            <span class="text-muted ng-binding"
                  data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb">（截至昨天）</span>
          </h4>
          <div class="col-sm-12">
            <div id="memberLineChart"
                 class="member-line-chart"
                 _echarts_instance_="1543301061157"
                 style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
              <div id="myChart"
                   :style="{width: '100%', height: '400px'}"></div>
            </div>
          </div>
        </div>
      </el-main>
      <el-dialog :title="employeeTitle"
                 width="50%"
                 :visible.sync="employeeVisible"
                 :close-on-click-modal="false">
        <el-table :data="employeeDatas"
                  style="width:100%;"
                  border
                  stripe
                  :header-row-class-name="headStyle"
                  highlight-current-row
                  v-loading="listLoading"
                  :row-class-name="tableRowClassName"
                  @sort-change="handleSortChange">
          <template slot="empty">
            暂时没权限查看
          </template>

          <el-table-column prop="index"
                           :formatter="index_formatter"
                           label="序号"></el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="dept"
                           label="部门"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="position"
                           label="职位"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-col :span="24"
                class="toolbar"
                id="pageDiv">
          <el-pagination small
                         background
                         @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         :total="total"
                         layout="total,sizes, prev, pager, next"
                         style="float:right;"></el-pagination>
        </el-col>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="primary"
                     @click="employeeVisible=false">关闭</el-button>
          <!--<el-button type="primary" @click="resetForm('addForm')">重置</el-button>-->
        </div>
      </el-dialog>
      <el-dialog :title="capitalTitle"
                 width="800px"
                 :visible.sync="capitalVisible"
                 :close-on-click-modal="false">
        <!-- <el-table :data="capitalDatas" style="width:100%;" border stripe :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange">
        <el-table-column prop="index" :formatter="index_formatter" label="序号"></el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="申请人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dept" label="部门" show-overflow-tooltip></el-table-column>
        <el-table-column prop="amount" label="金额" show-overflow-tooltip></el-table-column>
        <template slot="empty">
          暂时没权限查看
        </template>
      </el-table>
      <el-col :span="24" class="toolbar" id="pageDiv">
        <el-pagination small background :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
      </el-col>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="capitalVisible=false">关闭</el-button>
      </div> -->
        <div id="cashLineChart"
             class="member-line-chart">
          <div id="myCashChart"
               :style="{width: '750px', height: '400px'}"></div>
        </div>
      </el-dialog>
    </el-container>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import deptTree from "../report/deptTree.vue";
export default {
  name: "table_dept",
  components: {
    deptTree
  },
  data() {
    return {
      num: 0,
      employeeDatas: [],
      gridDatas: [],
      sort: {
        sort: "sort",
        order: "asc"
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      employeeTitle: "",
      capitalTitle: "",
      listLoading: false,
      dialogStatus: false,
      isDanwei: true,
      dialogFormVisible: false,
      addDisabled: true,
      employeeVisible: false,
      _btn_add_flag: false,
      capitalVisible: true,
      baseEmployee: [],
      capitalDatas: [],
      capital: 2,
      form: {
        cash: 0,
        income_mon: 0,
        income_day: 0,
        pay_mon: 0,
        pay_day: 0,
        employee: 0,
        employee_lz: 0,
        insurance: 0,
        insurance_no: 0,
        card: 0,
        card_no: 0
      },
      data_now: [],
      data_last: [],
      data1: [220, 182, 191, 234, 290],
      data2: [180, 112, 134, 189, 196],
      data3: [320, 332, 301, 334, 390],
      data4: [480, 341, 369, 741, 520]
    };
  },
  created() {},
  computed: {},
  methods: {
    capitalList(name, type) {
      this.capitalVisible = true;
      this.capitalTitle = name;
      let myChart = this.$echarts.init(document.getElementById("myCashChart"));
      if (type == 0) {
        myChart.setOption({
          title: {
            text: "本年度支出与收入"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["支出", "收入"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "支出",
              type: "line",
              stack: "总量",
              data: [
                17163,
                29686,
                48658,
                32658,
                25789,
                36894,
                59686,
                78965,
                74125,
                36985,
                45869,
                24785
              ]
            },
            {
              name: "收入",
              type: "line",
              stack: "总量",
              data: [
                19025,
                31536,
                43569,
                68653,
                34503,
                58965,
                76985,
                102365,
                86486,
                48965,
                58960,
                18632
              ]
            }
          ]
        });
      } else {
        var base = +new Date(2018, 11, 1);
        var oneDay = 24 * 3600 * 1000;
        var date = [];
        var data = [];
        var data1 = [];

        for (var i = 1; i < 30; i++) {
          var now = new Date((base += oneDay));
          date.push(
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
          );
          data.push(Math.floor(Math.random() * 100000) / 100);
          data1.push(Math.floor(Math.random() * 100000) / 100);
        }
        myChart.setOption({
          tooltip: {
            trigger: "axis"
          },
          title: {
            text: "本月资金流入支出"
          },
          legend: {
            data: ["支出", "收入"]
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: date
          },
          yAxis: {
            type: "value"
          },

          series: [
            {
              name: "支出",
              type: "line",
              stack: "总量",
              itemStyle: {
                color: "rgb(255, 70, 131)"
              },
              data: data1
            },
            {
              name: "收入",
              type: "line",
              stack: "总量",

              data: data
            }
          ]
        });
      }
    },
    initParam() {
      this.form.cash = Math.floor(Math.random() * 100000000) / 100;
      this.form.income_mon = Math.floor(Math.random() * 100000000) / 100;
      this.form.pay_mon = Math.floor(Math.random() * 100000000) / 100;
      this.form.income_day = Math.floor(Math.random() * 10000000) / 100;
      this.form.pay_day = Math.floor(Math.random() * 10000000) / 100;
      this.form.employee = Math.floor(Math.random() * 100);
      this.form.employee_lz = Math.floor(Math.random() * 10);
      this.form.insurance = Math.floor(Math.random() * 100);
      this.form.insurance_no = Math.floor(Math.random() * 10);
      this.form.card = Math.floor(Math.random() * 100);
      this.form.card_no = Math.floor(Math.random() * 10);
      this.num++;
      if (this.num % 2 == 0) {
        this.data_now = this.data1;
        this.data_last = this.data3;
      } else {
        this.data_now = this.data2;
        this.data_last = this.data4;
      }
      this.drawLine();
    },
    drawLine() {
      this.capitalVisible = false;
      const a = this;
      var labelOption = {
        normal: {
          show: true,
          position: "top"
        }
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        color: ["#80b490", "#006699"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["上月", "本月"]
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          x: "80%",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: [
              "企业账户余额 (万元)",
              "员工授信金额(万元)",
              "员工贷款金额(万元)",
              "工作日开门次数",
              "休息日开门次数"
            ]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "上月",
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: a.data_now
          },
          {
            name: "本月",
            type: "bar",
            label: labelOption,
            data: a.data_last
          }
        ]
      });
    },
    employeeList(name, num) {
      this.employeeVisible = true;
      this.employeeTitle = name;
    },
    handleSortChange(sort) {
      this.sort = {
        sort: sort.prop,
        order: sort.order == "ascending" ? "asc" : "desc"
      };
    },
    tableRowClassName(row, index) {
      //把每一行的索引放进row
      row.index = row.rowIndex;
    },
    headStyle({ row, rowIndex }) {
      return "table_head_style";
    },
    index_formatter: function(row, column, cellValue, index) {
      //放回索引值
      return this.pageSize * (this.page - 1) + 1 + index;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.page = 1;
    },
    resetSearchForm(formName) {
      this.$refs.filters.resetFields();
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.initParam();
      }
    }
  },
  mounted() {
    this.drawLine();
  }
};
</script>
<style lang="scss">
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 220px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding: 0 20px;
}
.pull-right {
  padding: 1px 5px;
  float: right;
  font-size: 16px;
}
</style>

